﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="GraphicsEngine.js"></script>
    <script type="text/javascript">
     $(document).ready(function(){
         w = ($(window).width()/2)-200;
         h = ($(window).height()/2)-200;
         $("#ach").css("left", w);
         $("#ach").css("top", h);
        $(document).on("click", ".wrong", function(){
        alert("خطأ، حاول مرة أخرى");
     });
         $(".right1").live("click",function(){
             $("#q1").fadeOut("slow", function(){
                 $("#ach").removeAttr("hidden");
                 $('body').append('<embed src="achievment_sound.mp3" autostart="true" hidden="true" loop="false">')
                 $("#ach").delay(1000).fadeOut('slow');
                $("#q2").fadeIn("slow");

             });
         });
         $(".right2").live("click",function(){
             $("#q2").fadeOut("slow", function(){
                 $("#q3").fadeIn("slow");
             });
         });
         $(".right3").live("click",function(){
             $("#q3").fadeOut("slow", function(){
                 $("#q4").fadeIn("slow");
             });
         });
         $(".right4").live("click",function(){
            $("#header").html("True & False");
             $("#q4").fadeOut("slow", function(){
                 $("#q5").fadeIn("slow");
             });
         });
         $(".right5").live("click",function(){
             $("#q5").fadeOut("slow", function(){
                 $("#q6").fadeIn("slow");
             });
         });
         $(".right6").live("click",function(){
             $("#q6").fadeOut("slow", function(){
                 $("#q7").fadeIn("slow");
             });
         });
         $(".right7").live("click",function(){
             window.location.href("homepage.html");
         });
     });
    </script>
</head>
<h1 id="header">Choose the correct answer</h1>
<body>
<div id="all">
<div id="q1">
    <table>
    <tr><td colspan="3"><label>The number of cranial nerves is ........... pairs of nerves.</label></td></tr>
    <tr><td><button class="wrong">31</button></td><td><button class="wrong">21</button></td><td><button class="right1">12</button></td></tr>
    </table>
    </div>
    <div id="q2" hidden="true">
        <table>
            <tr><td colspan="3"><label>The grey matter in the spinal cord appears in the shape of letter ..........</label></td></tr>
            <tr><td><button class="right2">H</button></td><td><button class="wrong">F</button></td><td><button class="wrong">A</button></td></tr>
        </table>
    </div>
    <div id="q3" hidden="true">
        <table>
            <tr><td colspan="3"><label>One of the components of nerve cell is the presence of ............</label></td></tr>
            <tr><td><button class="wrong">Blood vessels</button></td><td><button class="wrong">bones</button></td><td><button class="right3">dendrites</button></td></tr>
        </table>
    </div>
    <div id="q4" hidden="true">
        <table>
            <tr><td colspan="3"><label>............ controls reflex actions</label></td></tr>
            <tr><td><button class="right4">Spinal cord</button></td><td><button class="wrong">Cerebellum</button></td><td><button class="wrong">cerebrum</button></td></tr>
        </table>
    </div>
    <div id="q5" hidden="true">
        <table>
            <tr><td colspan="3"><label>All nerve cells must have axon.</label></td></tr>
            <tr><td><button class="right5">True</button></td><td><button class="wrong">False</button></td></tr>
        </table>
    </div>
    <div id="q6" hidden="true">
        <table>
            <tr><td colspan="3"><label>Cerebellum and medulla oblongata are parts of the human brain.</label></td></tr>
            <tr><td><button class="right6">True</button></td><td><button class="wrong">False</button></td></tr>
        </table>
    </div>
    <div id="q7" hidden="true">
        <table>
            <tr><td colspan="3"><label>Cranial nerves control the involuntary actions of the body.</label></td></tr>
            <tr><td><button class="wrong">True</button></td><td><button class="right7">False</button></td></tr>
        </table>
    </div>
</div>
<div id="ach" style="position: relative;" hidden="true"><img src="achievment_unlocked.png"></div>
</body>
</html>